<template>
  <div class="home">
    <div class="home-content">
      <a-row :gutter="[12, 12]">
        <a-col :span="6">
          <a-row>
            <a-col :span="24" style="margin-bottom: 20px">
              <h-ccard title="每日工作记录">
                <!-- <h-tooltip slot="que" title="这里接口还没有吧" /> -->
                <h-calendar ref="calen" style="margin-top: -44px" @change="changeCalendar" @showExcel="showExcel = true"></h-calendar>
              </h-ccard>
            </a-col>
            <a-col :span="24">
              <div class="event-card">
                <a-row>
                  <a-col :span="8" v-for="(item, i) in eventNumList" :key="i">
                    <div :class="['event-card-cnt', `event-card-cnt-${i + 1}`]">
                      <div class="event-card--img">
                        <img :src="item.icon" width="30px" alt="">
                      </div>
                      <div class="event-card--text">
                        <p>{{ item.title }}</p>
                        <p><span>{{ item.num | hotFilter }}</span>{{ item.unit }}</p>
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="6">
          <h-ccard
            title="处置事件"
            smallTitle="观察事件"
            @changeTab="changeTabEvent"
            rightType="more"
            style="height: 492px"
            @more="toURL(activeEvent === 2 ? '/handleEvent' : '/handleEvent/watch' )">
            <!-- <h-tooltip slot="que" title="观察事件是什么？" /> -->
            <div class="list-loading" v-if="eventLoading">
              <a-spin></a-spin>
            </div>
            <a-empty size="large" class="a-empty-card" v-else-if="!eventList.length"></a-empty>
            <template v-else>
              <div :class="[activeEvent == 2 ? 'scroll scroll2' : '']">
                <h-alert
                  @toDetail="toDetail(item, activeEvent === 2 ? 'cz' : 'gc', item.eventType)"
                  @handle="() => handle(item, activeEvent)"
                  v-for="item in eventList"
                  :showDetailBtn="true"
                  :showDesc="false"
                  :showDescribe="true"
                  :isLook="false"
                  type="primary"
                  :key="item.id"
                  :title="item.title"
                  v-bind="item" />
              </div>
            </template>
          </h-ccard>
        </a-col>
        <a-col :span="6">
          <!-- smallTitle="事件线索" -->
          <h-ccard
            title="最新舆情事件"
            rightType="more"
            style="height: 492px"
            @more="toURL(activeSem == 1 ? '/semNewList' : '/club/index')"
            @changeTab="changeTabSem">
            <!-- <a-empty size="large" class="a-empty-card" v-if="1"></a-empty> -->
            <a-empty size="large" class="a-empty-card" v-if="!ylList.length"></a-empty>
            <h-list
              :hideAction="activeSem != 1"
              v-else
              type="default"
              showLeftTime
              :showTitleSource="true"
              :data="ylList"
              :loading="ylLoading"
              @handle="handle($event, 1)"
              @handle2="handle2($event)"
              @handle3="handle3($event)"
              @detail="activeSem == 1 ? toLink($event, 'yq') : toLink($event)"></h-list>
              <!-- @detail="activeSem == 1 ? toDetailYq($event, 'yq') : toLink($event)" -->
          </h-ccard>
        </a-col>
        <a-col :span="6">
          <Action ref="action" />
        </a-col>
        <a-col :span="6">
          <h-ccard title="网络安全通报" style="height: 760px" rightType="more" @more="toURL('/safeInter')">
            <a-empty size="large" class="a-empty-card" v-if="!singleData.length && !singleLoading"></a-empty>
            <h-list v-else type="single-tag" :loading="singleLoading" :data="singleData" @detail="showSafeDetail"></h-list>
          </h-ccard>
        </a-col>
        <a-col :span="6">
          <h-ccard
            title="宁波热搜榜"
            smallTitle="平台热搜榜"
            style="height: 760px;"
            @changeTab="changeTab">
            <div style="margin-bottom: 12px;margin-top: -12px">
              <a-radio-group
                class="a-radio-button-blue"
                size="small"
                button-style="solid"
                v-model="source"
                v-if="active==2"
                @change="active == 1 ? getHotNBList(source) : getHotList(source)">
                <a-radio-button v-for="item in sourceList.filter(e => e.active.includes(active))" :key="item.value" :value="item.label">{{ item.label }}</a-radio-button>
              </a-radio-group>
            </div>

            <template slot="right">
              <a-dropdown>
                <a-button class="pz-btn" type="primary">
                  <a-icon type="menu" />菜单
                </a-button>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a href="javascript:;" @click="hotShow=true">配置</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;" @click="$router.push('/hotHistory')">历史记录</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
              <!-- <a-button class="pz-btn" type="primary" @click="articleShow=true">
                <a-icon type="setting" />配置
              </a-button>
              <a-button class="pz-btn" type="primary" style="margin-left: 12px" @click="toURL('/article')">
                <a-icon type="line-chart" />数据管理
              </a-button> -->
            </template>

            <a-empty size="large" class="a-empty-card" v-if="!hotData.length && !hotLoading"></a-empty>
            <h-list v-else type="hot" :loading="hotLoading" :data="hotData" @detail="toLink"></h-list>
            <!-- <div style="text-align: right;position: absolute;bottom: 12px;right: 20px">
              <a-button type="primary" @click="$router.push('/hotHistory')">
                历史记录
              </a-button>
            </div> -->
          </h-ccard>
        </a-col>
        <a-col :span="6">
          <a-row :gutter="[0, 20]">
            <!-- <a-col :span="24">
              <h-ccard title="重点账号" style="height: 450px">
                <template slot="right">
                  <a-dropdown>
                    <a-button class="pz-btn" type="primary">
                      <a-icon type="menu" />菜单
                    </a-button>
                    <a-menu slot="overlay">
                      <a-menu-item>
                        <a href="javascript:;" @click="accountShow = true">配置</a>
                      </a-menu-item>
                      <a-menu-item>
                        <a href="javascript:;" @click="toURL('/article')">数据管理</a>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </template>
                <a-empty size="large" class="a-empty-card" v-if="!importantData.length && !importantLoading"></a-empty>
                <h-list
                  v-else
                  type="important"
                  :data="importantData"
                  :pagination="importantDataPage"
                  :loading="importantLoading"
                  @change="changeImportantData"></h-list>
              </h-ccard>
            </a-col> -->
            <a-col :span="24">
              <h-ccard title="重点文章" style="height: 760px">
                <template slot="right">
                  <a-dropdown>
                    <a-button class="pz-btn" type="primary">
                      <a-icon type="menu" />菜单
                    </a-button>
                    <a-menu slot="overlay">
                      <a-menu-item>
                        <a href="javascript:;" @click="articleShow = true">配置</a>
                      </a-menu-item>
                      <a-menu-item>
                        <a href="javascript:;" @click="toURL('/article')">数据管理</a>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </template>
                <!-- <template slot="right">
                  <a-button class="pz-btn" type="primary" @click="articleShow=true">
                    <a-icon type="setting" />配置
                  </a-button>
                  <a-button class="pz-btn" type="primary" style="margin-left: 12px" @click="toURL('/article')">
                    <a-icon type="line-chart" />数据管理
                  </a-button>
                </template> -->
                <a-empty size="large" class="a-empty-card" v-if="!articleData.length && !articleLoading"></a-empty>
                <h-list
                  v-else
                  type="article"
                  :data="articleData"
                  :pagination="articlePage"
                  :loading="articleLoading"
                  @change="changearticle"
                  @detail="toLink"
                  @addWatch="addWatch"></h-list>
              </h-ccard>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="6">
          <h-ccard title="东海前哨数据" style="height: 760px" :rightType="modelName.includes('数据管理') ? 'button' : ''" @more="toURL('/dhData')">
            <template slot="rightMsg" >

              <a-icon type="line-chart" />数据管理
            </template>
            <a-empty size="large" class="a-empty-card" v-if="!datasData.length && !dhLoading"></a-empty>
            <div class="scroll scroll-dh" v-else style="height: 750px;">
              <h-list
                style="margin-top: -20px"
                @change="changeDhdata"
                type="datas"
                :loading="dhLoading"
                :pagination="dhPage"
                :data="datasData"
                @detail="showDhDetail"></h-list>
            </div>
          </h-ccard>
        </a-col>
      </a-row>

    </div>
    <!-- 平台热搜榜 配置 -->
    <createHot v-model="hotShow" @submit="refresh"/>

    <!-- 重点文章 配置 -->
    <createArticle v-model="articleShow" @submit="submit" />

    <!-- 重点账号配置 -->
    <createAccount v-model="accountShow" @submit="submit" />

    <!-- 处置事件 -->
    <createEventHandle
      v-model="handleShow"
      :id="id"
      :title="title"
      :typeId="typeId"
      :handleType="handleType"
      :label="label"
      :dateDuty="dateDuty"
      @submit="refresh" />
    <!-- 处置事件 -->
    <createEventWatch
      v-model="watchShow"
      :id="id"
      :title="title"
      :typeId="typeId"
      :handleType="handleType"
      :label="label"
      :dateDuty="dateDuty"
      @submit="refresh" />

    <createEventClue showDetail v-model="eventShow" />

    <!-- 网络安全通报 -->
    <createSafe v-model="safeShow" @submit="getSafeIntnet"/>
    <!-- 网络安全通报详情 -->
    <createSafeDetail v-model="safeDetailShow" :id="safeId" />
    <!-- 东海前哨详情 -->
    <createDhDetail v-model="dhDetailShow" :id="dhId" />

    <!-- 日历点击详情 -->
    <detailReport :reportTime="reportTime" v-model="showReport" />

    <createExcel v-model="showExcel" />
  </div>
</template>
<script>
import { czsj, yqList, safeIntnet, hotList, nbhotList, queryEventNum, getObserveEventPageList, addArticleWatch, impAccount, impArticle, dhHomeList, dhTopList, getClueEvent, updateSentimentToObserve } from '@/api/serve';
import Action from './action/Index';
import createAccount from './action/createAccount';
import createArticle from './action/createArticle';
import createHot from './action/createHot';
import createEventHandle from './action/createEventHandle';
import createEventWatch from './action/createEventWatch';
import createSafe from './action/createSafe';
import createSafeDetail from './action/createSafeDetail';
import createDhDetail from './action/createDhDetail';
import detailReport from './action/detailReport';
import createEventClue from './action/createEventClue';
import createExcel from './action/createExcel';
import moment from 'moment';
import { mapState } from 'vuex';
import { replaceHTML } from '@/api/common';

export default {
  components: {
    Action,
    createAccount,
    createArticle,
    createHot,
    createEventHandle,
    createEventWatch,
    createSafe,
    createSafeDetail,
    createDhDetail,
    detailReport,
    createEventClue,
    createExcel
  },
  inject: ['refresh'],
  data() {
    return {
      id: '',
      showExcel: false,
      title: '',
      typeId: '',
      handleType: '',
      label: '',
      dateDuty: '',
      source: '抖音',
      eventShow: false,
      showReport: false,
      ylLoading: false,
      eventLoading: false,
      singleLoading: false,
      hotLoading: false,
      importantLoading: false,
      articleLoading: false,
      dhLoading: false,
      reportTime: '',
      sourceList: [
        {
          label: '抖音',
          value: 1,
          active: [2]
        },
        {
          label: '微博',
          value: 2,
          active: [1, 2]
        },
        {
          label: '头条',
          value: 3,
          active: [1, 2]
        },
        {
          label: '百度',
          value: 4,
          active: [2]
        },
        {
          label: '知乎',
          value: 5,
          active: [2]
        }
      ],
      eventList: [

      ],
      eventNumList: [
        {
          title: '处置事件',
          num: 0,
          unit: '件',
          width: '27',
          icon: require('@/assets/Image/icon/event-icon-1.png'),
          key: 'disposeEventNum'
        },
        {
          title: '观察事件',
          num: 0,
          unit: '件',
          width: '27',
          icon: require('@/assets/Image/icon/event-icon-3.png'),
          key: 'observeEventNum'
        },
        {
          title: '应急事件',
          num: 0,
          unit: '件',
          width: '27',
          icon: require('@/assets/Image/icon/event-icon-2.png'),
          key: 'exigencyEventNum'
        },
      ],
      ylList: [],

      singleData: [],
      hotData: [],
      importantData: [],
      importantDataPage: {
        pageNo: 1,
        pageSize: 4,
        total: 0
      },
      articlePage: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      dhPage: {
        pageNo: 1,
        pageSize: 9,
        total: 0
      },
      articleData: [],
      datasData: [],
      hotForm: {},
      hotShow: false,
      articleShow: false,
      articleForm: {},
      accountShow: false,
      handleShow: false,
      watchShow: false,
      safeShow: false,
      safeDetailShow: false,
      dhDetailShow: false,
      safeId: '',
      dhId: '',
      active: 1,
      activeEvent: 2,
      activeSem: 1
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      modelName: state => state.user.modelName
    })
  },
  created() {
    this.init();
    this.$bus.$on('refresh', () => {
      console.log(this.$refs.calen);
      this.init();
      this.$refs.calen.refresh();
      this.$refs.action.reloadTime();
    });
  },
  methods: {
    init() {
      // 处置事件
      this.getCzsj();

      // 最新舆情事件
      this.getYqList();

      // 网络安全通报
      this.getSafeIntnet();

      // 平台热搜榜
      this.getHotNBList();

      // 重点账号
      this.getImpAccount();

      // 重点文章
      this.getImpArticle();

      // 东海前哨数据
      this.getDhData();

      // 事件统计数
      this.queryEventNum();
    },
    showSafeDetail({ id }) {
      this.safeDetailShow = true;
      this.safeId = id;
    },
    showDhDetail({ id }) {
      this.dhDetailShow = true;
      this.dhId = id;
    },
    // 处置事件
    getCzsj(type) {
      this.eventLoading = true;
      czsj({
        pageNo: 1,
        pageSize: 4,
        eventProc: 1
      }).then(res => {
        this.eventList = res.data.records.map(e => {
          return {
            ...e,
            no: e.code,
            // tip: e.eventLevel == 1 ? '重点' : '普通',
            // type: e.eventLevel == 1 ? 'danger' : 'primary',
            sendNum: e.askNum || 0,
            eventType: type || 1,
            createTime: `${moment(e.createTime).format('MM/DD HH:mm')}`
          };
        });
      }).finally(() => {
        this.eventLoading = false;
      });
    },
    getObserveEventPageList(type) {
      getObserveEventPageList({
        pageNo: 1,
        pageSize: 4
      }).then(res => {
        this.eventList = res.data.records.map(e => {
          return {
            ...e,
            no: e.code,
            type: e.eventLevel == 1 ? 'danger' : 'primary',
            sendNum: e.askNum || 0,
            desc: e.describe,
            eventType: type || 1
          };
        });
      });
    },
    // 最新舆情事件
    getYqList() {
      // this.ylList = [];
      this.ylLoading = true;
      yqList({
        pageNo: 1,
        pageSize: 13
      }).then(res => {
        this.ylList = res.data.records.map(e => {
          console.log(e.describe);
          return {
            ...e,
            createTime: e.notifyTime ? `${moment(e.notifyTime).format('MM/DD HH:mm')}` : '',
            describe: e.describe && replaceHTML(e.describe)
          };
        });
        console.log(this.ylList);
      }).finally(() => {
        this.ylLoading = false;
      });
    },
    // 事件线索
    getClueEvent() {
      this.ylLoading = true;
      getClueEvent({
        pageNo: 1,
        pageSize: 5
      }).then(res => {
        this.ylList = res.data.records.map(e => {
          return {
            ...e,
            createTime: `${moment(e.createTime).format('MM/DD HH:mm')}`
          };
        });
      }).finally(() => {
        this.ylLoading = false;
      });
    },
    // 网络安全通报
    getSafeIntnet() {
      const color = ['success', 'primary', 'danger'];
      // const typeName = ['市级', '省级', '中央'];
      this.singleLoading = true;
      safeIntnet({
        pageNo: 1,
        pageSize: 16
      }).then(res => {
        this.singleData = res.data.records.map(e => {
          return {
            ...e,
            simpleTagName: e.source,
            simpleTagColor: color[0],
            createTime: `${moment(e.reaseTime).format('MM/DD HH:mm')}`
          };
        });
      }).finally(() => {
        this.singleLoading = false;
      });
    },
    // 平台热搜榜
    getHotList(source = '微博') {
      this.hotLoading = true;
      hotList({
        source,
        level: 1,
        pageNo: 1,
        pageSize: 10
      }).then(res => {
        this.hotData = res.data.records.map((e, i) => {
          return {
            ...e,
            source: `数据源：${e.source}`,
            createTime: `获取时间：${moment(e.upTime).format('MM/DD HH:mm')}`,
            order: i + 1,
            isPing: e.isPing,
            hotNum: '热度：' + e.hotNumber
          };
        });
      }).finally(() => {
        this.hotLoading = false;
      });
    },
    // 宁波热搜榜
    getHotNBList(source) {
      if (!source) {
        source = '微博';
        this.source = '微博';
      }
      this.hotLoading = true;
      nbhotList({
        // source,
        pageNo: 1,
        pageSize: 10
      }).then(res => {
        this.hotData = res.data.records.map((e, i) => {
          return {
            ...e,
            source: `所属平台：${e.source}`,
            createTime: `获取时间：${moment(e.upTime).format('MM/DD HH:mm')}`,
            order: i + 1,
            hotNum: `本周最高排名${e.ranking}`
          };
        });
      }).finally(() => {
        this.hotLoading = false;
      });
    },
    changeTab(index) {
      this.active = index;
      if (index == 2) {
        this.source = '微博';
        this.getHotList();
      } else {
        this.getHotNBList('');
      }
    },
    changeTabSem(index) {
      this.activeSem = index;
      if (index == 1) {
        this.getYqList();
      } else {
        this.getClueEvent();
      }
    },
    changeTabEvent(index) {
      console.log(index);
      if (index == 1) {
        this.getCzsj(2);
        this.activeEvent = 2;
      } else {
        this.getObserveEventPageList(1);
        this.activeEvent = 1;
      }
    },
    // 重点账号
    getImpAccount(page) {
      this.importantLoading = true;
      impAccount({
        pageNo: page || 1,
        pageSize: 4
      }).then(res => {
        this.importantData = res.data.records.map((e, i) => {
          return {
            ...e,
            account: e.name,
            order: i + (((page || 1) - 1) * 4) + 1,
            // order: i + 1,
            tag: e.label,
            // createTime: `${moment(e.createTime).format('MM/DD HH:mm')}`
            createTime: `${moment(e.likeTime).format('MM/DD HH:mm')}`
          };
        });
        this.importantDataPage.total = res.data.total;
      }).finally(() => {
        this.importantLoading = false;
      });
    },
    changeImportantData(page) {
      console.log(page);
      this.getImpAccount(page);
    },
    changearticle(page) {
      this.getImpArticle(page);
    },
    // 重点文章
    getImpArticle(page) {
      this.articleLoading = true;
      impArticle({
        pageNo: page || 1,
        pageSize: 10,
        isDelete: 0
      }).then(res => {
        this.articleData = res.data.records.map(e => {
          return {
            ...e,
            createTime: moment(e.reaseTime).format('MM/DD HH:mm')
          };
        });
        this.articlePage.total = res.data.total;
      }).finally(() => {
        this.articleLoading = false;
      });
    },
    changeDhdata(page) {
      this.getDhData(page);
    },
    // 东海前哨数据
    async getDhData(page) {
      const res = await dhTopList();
      res.data.order = 1;
      const data = [res.data].map(e => {
        return {
          ...e,
          address: e.territory,
          createTime: `${moment(e.reaseTime).format('MM/DD HH:mm')}`,
          sortName: e.sortName
        };
      });
      console.log(data);
      this.dhLoading = true;
      dhHomeList({
        pageNo: page || 1,
        pageSize: 9
      }).then(res => {
        this.dhPage.total = res.data.total;
        this.datasData = data.concat(
          res.data.records.map(e => {
            return {
              ...e,
              address: e.territory,
              createTime: `${moment(e.reaseTime).format('MM/DD HH:mm')}`,
              sortName: e.sortName
            };
          })
        );
      }).finally(() => {
        this.dhLoading = false;
      });
    },
    toURL(path, item) {
      if (path) this.$router.push({ path });
      if (item && item.action) {
        const that = this;
        that[item.action] = true;
      }
    },
    toDetail(item, key, type) {
      this.$router.push({ path: '/detail', query: { id: item.id, typeId: item.typeId, key, type, dateDuty: item.dateDuty } });
    },
    toDetailYq(item, key) {
      this.$router.push({ path: '/yqDetail', query: { id: item.id, typeId: item.typeId, key } });
    },
    // 热搜榜配置
    submit() {

    },
    handle({ id, typeId, title, label, dateDuty }, type) {
      this.handleShow = true;
      this.id = id;
      this.title = title;
      console.log(id);
      this.typeId = typeId;
      this.handleType = type;
      this.label = label;
      this.dateDuty = dateDuty;
    },
    handle3(item, type) {
      const { id, typeId, title, label, dateDuty } = item
      console.log(item);
      this.watchShow = true;
      this.id = id;
      this.title = title;
      this.typeId = typeId;
      this.handleType = type;
      this.label = label;
      this.dateDuty = dateDuty;
    },
    handle2({ id }) {
      updateSentimentToObserve({
              id: id,
              describe: '已关注事件'
            }).then(res => {
              this.$message.success('舆情文章转为观察事件成功!');
              this.getList2()
            });

    },
    getList2() {
      yqList({
        pageNo: 1,
        pageSize: 13
      }).then(res => {
        this.ylList = res.data.records.map(e => {
          console.log(e.describe);
          return {
            ...e,
            createTime: e.notifyTime ? `${moment(e.notifyTime).format('MM/DD HH:mm')}` : '',
            describe: e.describe && replaceHTML(e.describe)
          };
        });
        console.log(this.ylList);
      }).finally(() => {
        this.ylLoading = false;
      });
    },
    // 添加文章监控
    addWatch(record) {
      const { id } = record;
      addArticleWatch({ ...record, articId: id }).then(res => {
        this.$message.success('添加监控成功');
      });
    },
    toLink({ link }) {
      console.log('link', link);
      if (!link || link == null) return;
      window.open(link);
    },
    queryEventNum() {
      queryEventNum().then(res => {
        this.eventNumList.forEach(e => {
          e.num = res.data[e.key];
        });
      });
    },
    changeCalendar(e) {
      console.log('时间', e);
      this.reportTime = moment(e).format('YYYY-MM-DD');
      this.showReport = true;
    }
  }
};
</script>
<style lang="less">
  .home-nav {
    margin-left: -10px;
  }
  .home-content {
    margin-top: 12px;
    margin-left: -10px;
  }
  .event-card {
    height: 77px;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 20px 32px;
    .event-card-cnt {
      display: flex;
      align-items: center;
      .event-card--img {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        flex-shrink: 0;
        border-radius: 100%;
        text-align: center;
        // vertical-align: middle;
        line-height: 36px;
        img {
          // margin-top: 2px;
        }
      }
      &.event-card-cnt-1 {
        color: #00B7EE;
        .event-card--img {
          background: #00B7EE;
        }
      }
      &.event-card-cnt-2 {
        color: #3573FC;
        .event-card--img {
          background: #3573FC;
        }
      }
      &.event-card-cnt-3 {
        color: #FC6935;
        .event-card--img {
          background: #FC6935;
        }
      }

      .event-card--text {
        margin-left: 7px;
        p {
          margin: 0;
          font-size: 13px;
        }
        >p:first-child {
          color: #333;
        }
        >P:last-child {
          text-align: center;
          margin-top: -4px;
          span {
            font-size: 20px;
          }
        }
      }
    }
  }

  @media (max-width: 1600px) {
    .event-card-cnt {
      .event-card--img {
        width: 30px !important;
        height: 30px !important;
        flex-basis: 30px !important;
        line-height: 26px !important;
        img {
          margin-top: 0px !important;
          width: 20px;
        }
      }
    }
  }

  .scroll-dh {
    padding: 0 12px;
  }
  .scroll2 {
    // height: 200px;
    height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 12px;
  }

</style>
